<template>
  <div class="water-chart-01 chart" ref="waterChart01"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";

const waterChart01 = ref(null);
const echarts = inject("$echarts");
import "echarts-liquidfill";

// 参数
const seriesData = [
  {
    value: 20,
    name: "≤10年",
    num: 1000,
  },
  {
    value: 40,
    name: "10-20年",
    num: 1000,
  },
  {
    value: 30,
    name: "20-30年",
    num: 1000,
  },
  {
    value: 10,
    name: ">30年",
    num: 1000,
  },
];

const backgroundStyle = [
  {
    type: "radial",
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [
      {
        offset: 0,
        color: "rgba(0,24,55, 0)",
      },
      {
        offset: 0.75,
        color: "rgba(0,24,55, 0)",
      },
      {
        offset: 1,
        color: "rgba(65,253,255, 1)",
      },
    ],
    globalCoord: false,
  },
  {
    type: "radial",
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [
      {
        offset: 0,
        color: "rgba(0,24,55, 0)",
      },
      {
        offset: 0.75,
        color: "rgba(0,24,55, 0)",
      },
      {
        offset: 1,
        color: "rgba(65,253,255, 1)",
      },
    ],
    globalCoord: false,
  },
  {
    type: "radial",
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [
      {
        offset: 0,
        color: "rgba(0,24,55, 0)",
      },
      {
        offset: 0.75,
        color: "rgba(0,24,55, 0)",
      },
      {
        offset: 1,
        color: "rgba(23,156,139, 1)",
      },
    ],
    globalCoord: false,
  },
  {
    type: "radial",
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [
      {
        offset: 0,
        color: "rgba(0,24,55, 0)",
      },
      {
        offset: 0.75,
        color: "rgba(0,24,55, 0)",
      },
      {
        offset: 1,
        color: "rgba(247, 254, 189, 1)",
      },
    ],
    globalCoord: false,
  },
];
const outlineColor = [
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(50,115,256, 1)",
      },
      {
        offset: 0.5,
        color: "rgba(50,115,233, .75)",
      },
      {
        offset: 1,
        color: "rgba(50,115,233, 1)",
      },
    ],
    globalCoord: false,
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(50,115,256, 1)",
      },
      {
        offset: 0.5,
        color: "rgba(50,115,233, .75)",
      },
      {
        offset: 1,
        color: "rgba(50,115,233, 1)",
      },
    ],
    globalCoord: false,
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 1,
        color: "rgba(72,107,254, 0.8)",
      },
      {
        offset: 0.75,
        color: "rgba(21,216,238, .5)",
      },
      {
        offset: 0,
        color: "rgba(40, 118, 247, 1)",
      },
    ],
    globalCoord: false,
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(50,115,256, 1)",
      },
      {
        offset: 0.5,
        color: "rgba(50,115,233, .75)",
      },
      {
        offset: 1,
        color: "rgba(50,115,233, 1)",
      },
    ],
    globalCoord: false,
  },
];
const itemStyleColor = [
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#35E8FB",
      },
      {
        offset: 0.5,
        color: "rgba(46, 171, 249, 0.6)",
      },
      {
        offset: 1,
        color: "#297CF7",
      },
    ],
    globalCoord: false,
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#35E8FB",
      },
      {
        offset: 0.5,
        color: "rgba(46, 171, 249, 0.6)",
      },
      {
        offset: 1,
        color: "#297CF7",
      },
    ],
    globalCoord: false,
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#34FAC1",
      },
      {
        offset: 0.5,
        color: "rgba(44, 255, 226, 0.6)",
      },
      {
        offset: 1,
        color: "#29D3F6",
      },
    ],
    globalCoord: false,
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#DEB050",
      },
      {
        offset: 0.5,
        color: "rgba(210, 195, 76, 0.6)",
      },
      {
        offset: 1,
        color: "#C4D746",
      },
    ],
    globalCoord: false,
  },
];
let titleData = [];
let series = [];
seriesData.forEach((item, index) => {
  const backgroundColor = backgroundStyle[index];
  const lineColor = outlineColor[index];
  const itemColor = itemStyleColor[index];
  titleData.push({
    text: item.name,
    x: `${25 / 2 + index * 25}%`,
    y: "55%",
    textAlign: "center",
    textStyle: {
      fontSize: "16",
      color: "#fff",
      textAlign: "center",
      fontWeight: 400,
    },
  });
  series.push({
    type: "liquidFill",
    name: item.name,
    radius: "25%",
    center: [`${25 / 2 + index * 25}%`, "40%"],
    //  shape: 'roundRect',
    data:
      // {
      //   // NOTE 为了扩大鼠标悬浮热区 tooltip展示
      //   value: 1,
      //   itemStyle: {
      //     color: "transparent",
      //   },
      // },
      [item.value / 100, item.value / 100],

    backgroundStyle: {
      // color: "transparent",
      color: backgroundColor,
    },
    // color: [color],
    itemStyle: {
      color: itemColor,
      shadowBlur: 0,
      shadowColor: "white",
    },
    outline: {
      borderDistance: 0,
      itemStyle: {
        borderWidth: 0,
        borderColor: lineColor,
        shadowBlur: 10,
        shadowColor: "#000",
      },
    },
    label: {
      // show: false,
      position: ["50%", "30%"],
      formatter: function () {
        return `${item.value}%`;
      },
      fontSize: 18,
      color: "#fff",
    },
  });
});

const option = {
  compCode: "C202310023",
  title: titleData,
  series: series,
  backgroundColor: "#000",
  tooltip: {
    show: true,
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
  },
};

onMounted(() => {
  const chart = echarts.init(waterChart01.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
